<template>
  <div class="finance-reports">
    <div class="page-header">
      <h1>财务报表</h1>
      <p class="subtitle">财务数据统计与分析报告</p>
    </div>

    <!-- 报表筛选 -->
    <div class="search-action-section">
      <div class="search-form">
        <div class="filter-group">
          <label>报表类型</label>
          <select v-model="selectedReport" @change="generateReport">
            <option value="cash-flow">现金流量表</option>
            <option value="profit-loss">损益表</option>
            <option value="balance-sheet">资产负债表</option>
            <option value="aging-analysis">账龄分析</option>
          </select>
        </div>
        <div class="filter-group">
          <label>时间范围</label>
          <select v-model="selectedPeriod" @change="generateReport">
            <option value="current-month">本月</option>
            <option value="last-month">上月</option>
            <option value="current-quarter">本季度</option>
            <option value="current-year">本年</option>
            <option value="custom">自定义</option>
          </select>
        </div>
        <div v-if="selectedPeriod === 'custom'" class="filter-group">
          <label>开始日期</label>
          <input type="date" v-model="startDate" @change="generateReport">
        </div>
        <div v-if="selectedPeriod === 'custom'" class="filter-group">
          <label>结束日期</label>
          <input type="date" v-model="endDate" @change="generateReport">
        </div>
      </div>
    </div>

    <!-- 现金流量表 -->
    <div v-if="selectedReport === 'cash-flow'" class="report-content">
      <div class="report-header">
        <h2>现金流量表</h2>
        <div class="report-actions">
          <button class="btn btn-primary" @click="exportReport">
            <span class="btn-icon">📊</span>
            导出报表
          </button>
          <button class="btn btn-secondary" @click="printReport">
            <span class="btn-icon">🖨️</span>
            打印
          </button>
        </div>
      </div>
      
      <div class="cash-flow-summary">
        <div class="summary-card">
          <h3>经营活动现金流</h3>
          <p class="amount positive">¥{{ formatNumber(cashFlowData.operating) }}</p>
        </div>
        <div class="summary-card">
          <h3>投资活动现金流</h3>
          <p class="amount negative">¥{{ formatNumber(cashFlowData.investing) }}</p>
        </div>
        <div class="summary-card">
          <h3>筹资活动现金流</h3>
          <p class="amount positive">¥{{ formatNumber(cashFlowData.financing) }}</p>
        </div>
        <div class="summary-card">
          <h3>净现金流</h3>
          <p class="amount" :class="cashFlowData.net >= 0 ? 'positive' : 'negative'">
            ¥{{ formatNumber(cashFlowData.net) }}
          </p>
        </div>
      </div>

      <div class="cash-flow-details">
        <h3>现金流量明细</h3>
        <div class="table-section">
          <table class="report-table">
            <thead>
              <tr>
                <th>项目</th>
                <th>金额</th>
                <th>占比</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in cashFlowDetails" :key="item.name">
                <td>{{ item.name }}</td>
                <td class="amount" :class="item.amount >= 0 ? 'positive' : 'negative'">
                  ¥{{ formatNumber(item.amount) }}
                </td>
                <td>{{ item.percentage }}%</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- 损益表 -->
    <div v-if="selectedReport === 'profit-loss'" class="report-content">
      <div class="report-header">
        <h2>损益表</h2>
        <div class="report-actions">
          <button class="export-btn" @click="exportReport">📊 导出报表</button>
          <button class="print-btn" @click="printReport">🖨️ 打印</button>
        </div>
      </div>
      
      <div class="profit-loss-summary">
        <div class="summary-card">
          <h3>营业收入</h3>
          <p class="amount positive">¥{{ formatNumber(profitLossData.revenue) }}</p>
        </div>
        <div class="summary-card">
          <h3>营业成本</h3>
          <p class="amount negative">¥{{ formatNumber(profitLossData.cost) }}</p>
        </div>
        <div class="summary-card">
          <h3>营业利润</h3>
          <p class="amount" :class="profitLossData.operatingProfit >= 0 ? 'positive' : 'negative'">
            ¥{{ formatNumber(profitLossData.operatingProfit) }}
          </p>
        </div>
        <div class="summary-card">
          <h3>净利润</h3>
          <p class="amount" :class="profitLossData.netProfit >= 0 ? 'positive' : 'negative'">
            ¥{{ formatNumber(profitLossData.netProfit) }}
          </p>
        </div>
      </div>

      <div class="profit-loss-details">
        <h3>损益明细</h3>
        <table class="report-table">
          <thead>
            <tr>
              <th>项目</th>
              <th>金额</th>
              <th>占收入比</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in profitLossDetails" :key="item.name">
              <td>{{ item.name }}</td>
              <td class="amount" :class="item.amount >= 0 ? 'positive' : 'negative'">
                ¥{{ formatNumber(item.amount) }}
              </td>
              <td>{{ item.percentage }}%</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 资产负债表 -->
    <div v-if="selectedReport === 'balance-sheet'" class="report-content">
      <div class="report-header">
        <h2>资产负债表</h2>
        <div class="report-actions">
          <button class="btn btn-primary" @click="exportReport">
            <span class="btn-icon">📊</span>
            导出报表
          </button>
          <button class="btn btn-secondary" @click="printReport">
            <span class="btn-icon">🖨️</span>
            打印
          </button>
        </div>
      </div>
      
      <div class="balance-sheet-summary">
        <div class="summary-card">
          <h3>总资产</h3>
          <p class="amount positive">¥{{ formatNumber(balanceSheetData.totalAssets) }}</p>
        </div>
        <div class="summary-card">
          <h3>总负债</h3>
          <p class="amount negative">¥{{ formatNumber(balanceSheetData.totalLiabilities) }}</p>
        </div>
        <div class="summary-card">
          <h3>所有者权益</h3>
          <p class="amount" :class="balanceSheetData.equity >= 0 ? 'positive' : 'negative'">
            ¥{{ formatNumber(balanceSheetData.equity) }}
          </p>
        </div>
      </div>

      <div class="balance-sheet-details">
        <div class="assets-section">
          <h3>资产</h3>
          <table class="report-table">
            <thead>
              <tr>
                <th>项目</th>
                <th>金额</th>
                <th>占比</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in balanceSheetData.assets" :key="item.name">
                <td>{{ item.name }}</td>
                <td class="amount positive">¥{{ formatNumber(item.amount) }}</td>
                <td>{{ item.percentage }}%</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="liabilities-section">
          <h3>负债</h3>
          <table class="report-table">
            <thead>
              <tr>
                <th>项目</th>
                <th>金额</th>
                <th>占比</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in balanceSheetData.liabilities" :key="item.name">
                <td>{{ item.name }}</td>
                <td class="amount negative">¥{{ formatNumber(item.amount) }}</td>
                <td>{{ item.percentage }}%</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- 账龄分析 -->
    <div v-if="selectedReport === 'aging-analysis'" class="report-content">
      <div class="report-header">
        <h2>账龄分析</h2>
        <div class="report-actions">
          <button class="btn btn-primary" @click="exportReport">
            <span class="btn-icon">📊</span>
            导出报表
          </button>
          <button class="btn btn-secondary" @click="printReport">
            <span class="btn-icon">🖨️</span>
            打印
          </button>
        </div>
      </div>
      
      <div class="aging-summary">
        <div class="summary-card">
          <h3>应收账款总额</h3>
          <p class="amount">¥{{ formatNumber(agingData.totalReceivable) }}</p>
        </div>
        <div class="summary-card">
          <h3>逾期金额</h3>
          <p class="amount negative">¥{{ formatNumber(agingData.overdueAmount) }}</p>
        </div>
        <div class="summary-card">
          <h3>逾期率</h3>
          <p class="amount negative">{{ agingData.overdueRate }}%</p>
        </div>
      </div>

      <div class="aging-details">
        <h3>账龄分布</h3>
        <table class="report-table">
          <thead>
            <tr>
              <th>账龄</th>
              <th>金额</th>
              <th>占比</th>
              <th>风险等级</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in agingData.details" :key="item.period">
              <td>{{ item.period }}</td>
              <td class="amount">¥{{ formatNumber(item.amount) }}</td>
              <td>{{ item.percentage }}%</td>
              <td>
                <span class="risk-level" :class="item.riskLevel">{{ item.riskLevel }}</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 响应式数据
const selectedReport = ref('cash-flow')
const selectedPeriod = ref('current-month')
const startDate = ref('')
const endDate = ref('')

// 现金流量表数据
const cashFlowData = ref({
  operating: 125000,
  investing: -45000,
  financing: 80000,
  net: 160000
})

const cashFlowDetails = ref([
  { name: '销售商品收到的现金', amount: 180000, percentage: 144 },
  { name: '购买商品支付的现金', amount: -95000, percentage: -76 },
  { name: '支付职工薪酬', amount: -35000, percentage: -28 },
  { name: '支付税费', amount: -15000, percentage: -12 },
  { name: '投资支付的现金', amount: -45000, percentage: -36 },
  { name: '筹资收到的现金', amount: 80000, percentage: 64 }
])

// 损益表数据
const profitLossData = ref({
  revenue: 250000,
  cost: 180000,
  operatingProfit: 70000,
  netProfit: 55000
})

const profitLossDetails = ref([
  { name: '营业收入', amount: 250000, percentage: 100 },
  { name: '营业成本', amount: -180000, percentage: -72 },
  { name: '销售费用', amount: -25000, percentage: -10 },
  { name: '管理费用', amount: -15000, percentage: -6 },
  { name: '财务费用', amount: -5000, percentage: -2 },
  { name: '营业利润', amount: 70000, percentage: 28 },
  { name: '营业外收入', amount: 5000, percentage: 2 },
  { name: '营业外支出', amount: -20000, percentage: -8 },
  { name: '净利润', amount: 55000, percentage: 22 }
])

// 资产负债表数据
const balanceSheetData = ref({
  totalAssets: 500000,
  totalLiabilities: 200000,
  equity: 300000,
  assets: [
    { name: '货币资金', amount: 150000, percentage: 30 },
    { name: '应收账款', amount: 80000, percentage: 16 },
    { name: '存货', amount: 120000, percentage: 24 },
    { name: '固定资产', amount: 150000, percentage: 30 }
  ],
  liabilities: [
    { name: '应付账款', amount: 100000, percentage: 50 },
    { name: '预收账款', amount: 30000, percentage: 15 },
    { name: '长期借款', amount: 70000, percentage: 35 }
  ]
})

// 账龄分析数据
const agingData = ref({
  totalReceivable: 80000,
  overdueAmount: 15000,
  overdueRate: 18.75,
  details: [
    { period: '30天内', amount: 45000, percentage: 56.25, riskLevel: 'low' },
    { period: '31-60天', amount: 15000, percentage: 18.75, riskLevel: 'medium' },
    { period: '61-90天', amount: 8000, percentage: 10, riskLevel: 'high' },
    { period: '90天以上', amount: 12000, percentage: 15, riskLevel: 'critical' }
  ]
})

// 格式化数字
const formatNumber = (num) => {
  if (!num) return '0.00'
  return new Intl.NumberFormat('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(Math.abs(num))
}

// 生成报表
const generateReport = () => {
  // 这里可以根据选择的报表类型和时间范围从后端获取数据
  
}

// 导出报表
const exportReport = () => {
  
  // 实现导出功能
}

// 打印报表
const printReport = () => {
  
  window.print()
}

onMounted(() => {
  generateReport()
})
</script>

<style scoped>
.finance-reports {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 32px;
}

.page-header h1 {
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 8px;
}

.subtitle {
  color: #7f8c8d;
  font-size: 1.1rem;
}

.report-filters {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  align-items: end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-group label {
  font-weight: 500;
  color: #495057;
  font-size: 0.9rem;
}

.filter-group select,
.filter-group input {
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 0.9rem;
  min-width: 150px;
}

.report-content {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e9ecef;
}

.report-header h2 {
  margin: 0;
  color: #2c3e50;
}

.report-actions {
  display: flex;
  gap: 12px;
}

.export-btn,
.print-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}

.export-btn {
  background: #28a745;
  color: white;
}

.export-btn:hover {
  background: #218838;
}

.print-btn {
  background: #6c757d;
  color: white;
}

.print-btn:hover {
  background: #545b62;
}

.cash-flow-summary,
.profit-loss-summary,
.balance-sheet-summary,
.aging-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.summary-card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.summary-card h3 {
  margin: 0 0 12px 0;
  color: #495057;
  font-size: 1rem;
}

.summary-card .amount {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0;
}

.amount.positive {
  color: #28a745;
}

.amount.negative {
  color: #dc3545;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-top: 16px;
}

.report-table th,
.report-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #e9ecef;
}

.report-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #495057;
}

.report-table tr:hover {
  background: #f8f9fa;
}

.risk-level {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}

.risk-level.low {
  background: #d4edda;
  color: #155724;
}

.risk-level.medium {
  background: #fff3cd;
  color: #856404;
}

.risk-level.high {
  background: #f8d7da;
  color: #721c24;
}

.risk-level.critical {
  background: #f5c6cb;
  color: #721c24;
}

.balance-sheet-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.assets-section,
.liabilities-section {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
}

.assets-section h3,
.liabilities-section h3 {
  margin: 0 0 16px 0;
  color: #2c3e50;
}

@media (max-width: 768px) {
  .finance-reports {
    padding: 16px;
  }
  
  .report-filters {
    flex-direction: column;
    align-items: stretch;
  }
  
  .report-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .report-actions {
    justify-content: center;
  }
  
  .cash-flow-summary,
  .profit-loss-summary,
  .balance-sheet-summary,
  .aging-summary {
    grid-template-columns: 1fr;
  }
  
  .balance-sheet-details {
    grid-template-columns: 1fr;
  }
  
  .report-table {
    font-size: 0.8rem;
  }
  
  .report-table th,
  .report-table td {
    padding: 8px;
  }
}

@media print {
  .report-filters,
  .report-actions {
    display: none;
  }
  
  .finance-reports {
    padding: 0;
  }
  
  .report-content {
    box-shadow: none;
    border: 1px solid #000;
  }
}
</style>


